<script lang="ts" setup>
import { ref } from "vue";
import { listStatistics } from "@/api/monitor/operlog";
import * as echarts from "echarts";

const chartData = ref();
const loading = ref(true);
const chart = ref();
let myChart: any;

const getList = async () => {
  if (myChart) {
    myChart.dispose(); // 销毁当前的图表实例
  }
  loading.value = true;
  const res = await listStatistics(null);
  console.log(res);
  chartData.value = res.data;
  loading.value = false;

  let infoEl = chart.value;
  myChart = echarts.init(infoEl);
  type EChartsOption = echarts.EChartsOption;
  let option: EChartsOption;
  option = {
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00", "#FF9A00", "#9932CC", "#FF4500", "#808080"],
    title: {},
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985"
        }
      }
    },
    legend: {
      data: ["新增", "修改", "删除", "授权", "导出", "导入", "强退", "生成代码", "清空数据"]
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: "2%",
      top: "10%",
      right: "2%",
      bottom: "2%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: [...new Set(chartData.value.map((item: any) => item.date))]
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "新增",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(128, 255, 165)"
            },
            {
              offset: 1,
              color: "rgb(1, 191, 236)"
            }
          ])
        },
        emphasis: {
          focus: "series"
        },
        data: chartData.value.filter(item => item.type === "1").map((i: any) => i.count)
      },
      {
        name: "修改",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(0, 221, 255)"
            },
            {
              offset: 1,
              color: "rgb(77, 119, 255)"
            }
          ])
        },
        emphasis: {
          focus: "series"
        },
        data: chartData.value.filter(item => item.type === "2").map((i: any) => i.count)
      },
      {
        name: "删除",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(55, 162, 255)"
            },
            {
              offset: 1,
              color: "rgb(116, 21, 219)"
            }
          ])
        },
        emphasis: {
          focus: "series"
        },
        data: chartData.value.filter(item => item.type === "3").map((i: any) => i.count)
      },
      {
        name: "授权",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 0, 135)"
            },
            {
              offset: 1,
              color: "rgb(135, 0, 157)"
            }
          ])
        },
        emphasis: {
          focus: "series"
        },
        data: chartData.value.filter(item => item.type === "4").map((i: any) => i.count)
      },
      {
        name: "导出",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: "top"
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 191, 0)"
            },
            {
              offset: 1,
              color: "rgb(224, 62, 76)"
            }
          ])
        },
        emphasis: {
          focus: "series"
        },
        data: chartData.value.filter(item => item.type === "5").map((i: any) => i.count)
      },
      {
        name: "导入",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: "top"
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255,191,0)"
            },
            {
              offset: 1,
              color: "rgb(255,154,0)"
            }
          ])
        },
        emphasis: {
          focus: "series"
        },
        data: chartData.value.filter(item => item.type === "6").map((i: any) => i.count)
      },
      {
        name: "强退",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: "top"
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255,154,0)"
            },
            {
              offset: 1,
              color: "rgb(153,50,204)"
            }
          ])
        },
        emphasis: {
          focus: "series"
        },
        data: chartData.value.filter(item => item.type === "7").map((i: any) => i.count)
      },
      {
        name: "生成代码",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: "top"
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(153,50,204)"
            },
            {
              offset: 1,
              color: "rgb(255,69,0)"
            }
          ])
        },
        emphasis: {
          focus: "series"
        },
        data: chartData.value.filter(item => item.type === "8").map((i: any) => i.count)
      },
      {
        name: "清空数据",
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: "top"
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255,69,0)"
            },
            {
              offset: 1,
              color: "rgb(128,128,128)"
            }
          ])
        },
        emphasis: {
          focus: "series"
        },
        data: chartData.value.filter(item => item.type === "9").map((i: any) => i.count)
      }
    ]
  };
  myChart.resize(); // 调整图表大小
  option && myChart.setOption(option); // 设置图表选项
};
onMounted(async () => {
  await getList(); // 初始化时获取数据
});
defineExpose({ getList });
</script>

<template>
  <a-spin :spinning="loading" size="large">
    <div ref="chart" style="height: 400px"></div>
  </a-spin>
</template>

<style lang="scss" scoped>

</style>
